<!DOCTYPE html>
<html>
<head>
   <title>CSS Animations - appendRule on CSSKeyframesRule interface</title>
   <link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
   <link rel="help" href="http://dev.w3.org/csswg/css3-animations/#dom-interfaces-">
   <meta name="flags" content="dom">
   <meta name="assert" content="The appendRule method of CSSKeyframesRule
   appends the passed keyframe rule into the list at the passed key">
   <script src="/resources/testharness.js"></script>
   <script src="/resources/testharnessreport.js"></script>
   <style type="text/css">
      @keyframes test {
         from { width: 100px; }
         to { width: 200px; }
      }
   </style>
   <script type="text/javascript">
      setup({explicit_done:true});
      onload = function() {
         var testName = document.querySelector('title').firstChild.data;
         var log = document.querySelectorAll('p')[0].firstChild;
         var passed = false;
         try {
            var testKeyframes = document.styleSheets[0].cssRules[0];
            testKeyframes.appendRule('50% { width: 150px; }');
            var newRule = testKeyframes.cssRules[2];
            passed = (newRule.keyText == '50%'
                      && newRule.style.getPropertyValue('width') == '150px');
         } catch(e) {
         }
         test(function(){assert_true(passed);}, testName); done();
         log.data = (passed ? 'PASS' : 'FAIL');
      };
   </script>
   <style>iframe{display:none}</style>
</head>
<body>
   <p>Testing... (JavaScript required)</p>
</body>
</html>
